<template>
  <!-- 外层容器 -->
  <el-container>
    <!-- 侧边栏容器 -->
    <el-aside width="200px">
      <nav-com :menus=menus></nav-com>
      <!-- <nav-menu :navMenus="menuData"></nav-menu> -->
    </el-aside>
    <el-container>
      <!-- 顶栏容器 -->
      <el-header>
        <top-menu></top-menu>
      </el-header>
      <!-- 主要区域容器 -->
      <el-main>
        <tab-com></tab-com>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import NavMenu from './components/NavMenu'
import TopMenu from './components/TopMenu'
import NavCom from './components/NavCom'
import TabCom from './components/TabCom'

export default {
  name: 'Main',
  components: {
    NavMenu,
    TopMenu,
    NavCom,
    TabCom
  },
  data () {
    return {
      activeIndex: '/',
      menus: [
        { route: '/home', name: '首页', children: false },
        { route: '/menu2', name: '菜单2', children: [{ route: '/menu2/view1', name: '菜单2-1' }, { route: '/menu2/view2', name: '菜单2-2' }, { route: '/menu2/view3', name: '菜单2-3' }] },
        { route: '/menu3', name: '菜单3', children: [{ route: '/menu3/view1', name: '菜单3-1' }, { route: '/menu3/view2', name: '菜单3-2' }] },
        { route: '/menu4', name: '菜单4', children: [{ route: '/menu4/view1', name: '菜单4-1' }] }
      ]
      // menuData: [{
      //   entity: { id: 0, path: '/home', icon: 'el-icon-message', alias: '我的桌面' }
      // }, {
      //   entity: { id: 1, path: 'systemManage', icon: 'el-icon-message', alias: '菜单2' },
      //   childs: [
      //     { entity: { id: 3, path: '/menu2/view1', icon: 'el-icon-loading', alias: '菜单2-1' } },
      //     { entity: { id: 4, path: '/menu2/view2', icon: 'el-icon-bell', alias: '菜单2-2' } },
      //     { entity: { id: 2, path: '/menu2/view3', icon: 'el-icon-edit', alias: '菜单2-3', value: '/system/menu' } },
      //     { entity: { id: 5, path: '/menu2/groupManage', icon: 'el-icon-mobile-phone\r\n', alias: '菜单2-4', value: '/system/group' } }
      //   ]
      // }, {
      //   entity: { id: 6, path: 'userManage', icon: 'el-icon-news', alias: '菜单3' },
      //   childs: [
      //     { entity: { id: 7, path: 'accountManage', icon: 'el-icon-phone-outline\r\n', alias: '菜单3-1', value: '' } }
      //   ]
      // }, {
      //   entity: { id: 40, path: 'contentManage', icon: 'el-icon-rank', alias: '菜单4' },
      //   childs: [
      //     { entity: { id: 41, path: 'classifyManage2', icon: 'el-icon-printer', alias: '菜单4-1' } }
      //   ]
      // }]
    }
  },
  mounted () {
    console.log(window.location.href)
    let start = window.location.href.lastIndexOf('/')
    let path = window.location.href.slice(start + 1)
    this.activeIndex = path
    console.log(this.activeIndex)
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl';

.el-menu {
  background: $bgColor;
  color: #fff;
  min-height: 100vh;
  width: $navWidth;
  float: left;
}

.el-header {
  padding: 0px;
}

.el-main {
  padding: 0px;
}
</style>
